<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .wrapper {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        
        .content {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <!-- 协议限定符 -->
    <a href="javascript:void()">dome</a>
    <a href="#" style="color: cadetblue;">点击</a>
    <!-- <div style="background-color: blue;width: 100px;height: 100px;"></div> -->
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
    <div class="obj">1</div>

    <script>
        //      事件处理程序的运行环境
        // 1.ele.onxxx = function(event){}
        //    程序this指向是dom元素本身
        // 2.obj.addEventListener(type,fn,false);
        //    程序this指向是dom元素本身
        // 3.obj.attachEvent('on' + type,fn);
        //    程序this指向window
        // var div = document.getElementsByTagName('div')[0];
        // 1.
        // div.onclick = function() {
        //     console.log(this);
        // }
        // 2.
        // div.addEventListener('click', function() {
        //     console.log(this);
        // }, false);
        // 3.
        // div.attachEvent('onclick', function() {
        //     console.log(this);
        // });
        // 让this指向div
        // div.attachEvent('onclick', function() {
        //     handle.call(div);
        // });
        // function handle() {
        //     // 事件处理程序
        // }

        // 封装兼容性的addEvent(elem,type,handle);方法
        // function addEvent(elem, type, handle) {
        //     if (elem.addEventListener) {
        //         elem.addEventListener(type, handle, false);
        //     } else if (elem.attachEvent) {
        //         elem.attachEvent('on' + type, function() {
        //             handle.call(elem);
        //         })
        //     } else {
        //         elem['on' + type] = handle;
        //     }
        // }

        //        解除事件处理程序
        // ele.onclick = false/''/null;
        // div.onclick = function() {
        //         console.log('a');
        //         div.onclick = null; //放在里面只生效一次
        //     }
        // ele.removeEventListener(type,fn,false);
        // function test() {
        //     console.log('a');
        // }
        // div.addEventListener('click', test, false);
        // div.removeEventListener('click', test, false);

        // ele.detachEvent('on' + type,fn);
        // 注意：若是绑定匿名函数，则无法接触


        //        事件处理模型---事件冒泡，捕获
        // 事件冒泡
        //    结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即
        //    同一事件，自子元素冒泡向父元素。（自底向上）
        // 事件捕获
        //    结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即
        //    同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
        //    IE没有捕获事件
        // 触发顺序，先捕获，后冒泡
        // focus,blur,change,submit,reset,select等事件不冒泡
        // var wrapper = document.getElementsByClassName('wrapper')[0];
        // var content = document.getElementsByClassName('content')[0];
        // var box = document.getElementsByClassName('box')[0];
        // wrapper.addEventListener('click', function() {
        //     console.log('wrapperBubble');
        // }, false)
        // content.addEventListener('click', function() {
        //     console.log('contentBubble');
        // }, false)
        // box.addEventListener('click', function() {
        //     console.log('boxBubble');
        // }, false)
        // wrapper.addEventListener('click', function() {
        //     console.log('wrapper');
        // }, true)
        // content.addEventListener('click', function() {
        //     console.log('content');
        // }, true)
        // box.addEventListener('click', function() {
        //     console.log('box');
        // }, true)

        //先绑定的先执行
        //把false改成true实现捕获功能


        //      取消冒泡和阻止默认事件
        // document.onclick = function() {
        //     console.log('奥里给');
        // }
        // var div = document.getElementsByTagName('div')[0];
        // div.onclick = function(e) {
        // console.log(e); //事件对象
        // e.stopPropagation(); //事件对象上的阻止冒泡方法
        // e.cancelBubble = true;//新版谷歌也有
        // }
        // 取消冒泡
        //    W3C标准event.stopPropagation();但不支持IE9以下版本
        //    IE独有event.cancelBubble = true;
        //    封装取消冒泡的函数stopBubble(event)
        // function stopBubble(event) {
        //     if (event.stopPropagation) {
        //         event.stopPropagation();
        //     } else {
        //         event.cancelBubble = true;
        //     }
        // }

        // 阻止默认事件
        //    默认事件---表单提交，a标签跳转，右键菜单等
        //    1.return false;以对象属性的方式注册的事件才生效
        //    2.event.preventDefault();W3C标注，IE9以下不兼容
        //    3.event.returnValue = false;兼容IE
        //    封装阻止默认事件的函数 cancelHandler(event);
        // function cancelHandle(e) {
        //     if (e.preventDefault) {
        //         e.preventDefault();
        //     } else {
        //         e.returnValue = false;
        //     }
        // }

        // 右键出菜单事件
        // document.oncontextmenu = function() {
        //     return false;
        // };
        // a标签跳转
        // var a = document.getElementsByTagName('a')[0];
        // a.onclick = function() {
        //     return false;
        // }

        // 事件对象
        // event||window.event用于IE、
        // 事件源对象：
        //    event.target  火狐只有这个（低版本）
        //    event.srcElement  ie只有这个（低版本）
        //    chrome都有
        // 兼容性写法
        // var div = document.getElementsByClassName('obj')[0];
        // div.onclick = function(e) {
        //     var event = e || window.event;
        //     console.log(event);
        // }

        //      事件委托
        // 利用事件冒泡，和事件源对象进行处理
        // 优点：
        //    1.性能  不需要循环所有的元素一个个绑定事件
        //    2.灵活  当有新的子元素时不需要重新绑定事件
        // var ul = document.getElementsByTagName('ul')[0];
        // ul.onclick = function(e) {
        //     var event = e || window.event;
        //     var target = event.target || event.srcElement;
        //     console.log(target.innerText);
        // }
    </script>
</body>

</html>